<template>
  <view class="page">
    <u-cell-group :border="false">
      <u-cell-item title="头像" :arrow="true">
        <u-avatar size="60" bg-color='#000;' :src="model.avatar" v-if="model.avatar!=''"
          style="position: absolute;right: 35px;top:12px;"></u-avatar>
        <u-avatar size="60" bg-color='#000;' :src="this.vuex_config.defaultAvatar" v-else
          style="position: absolute;right: 35px;top:12px;"></u-avatar>
      </u-cell-item>
      <u-cell-item title="所属部门" :value="model.deptName" :title-width="180" :arrow="false"></u-cell-item>
      <u-cell-item title="岗位" :value="model.postName" :title-width="180" :arrow="false"></u-cell-item>
      <u-cell-item title="手机" :value="model.phone" :title-width="180"></u-cell-item>
      <u-cell-item title="邮箱" :value="model.email" :title-width="180"></u-cell-item>
    </u-cell-group>
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    data() {
      return {
        model: {
          sex: '1'
        },
        rules: {

        },
        avatarBase64: ''
      };
    },
    onLoad() {
      this.$u.api.user.getUserInfo().then(res => {
        if (res.code == '200') {
          this.model = res.data;
        } else if (res.result == 'login') {
          uni.reLaunch({
            url: '/pages/sys/login/index'
          });
        } else {
          this.$u.toast(res.message);
        }
      });
      uni.$on('uAvatarCropper', path => {
        this.avatarBase64 = path;
      })
    },
    computed: {

    },
    methods: {
      chooseAvatar() {
        this.$u.route({
          url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
          params: {
            destWidth: 200, // 输出图片宽高
            rectWidth: 200, // 裁剪框的宽高
            fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          }
        })
      },
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            // #ifdef MP-WEIXIN || MP-TOUTIAO
            this.$u.toast('您填写的信息有误，11。');
            if (this.avatarBase64 != '' && !this.avatarBase64.startsWith('data:')) {
              this.avatarBase64 = 'data:image/jpeg;base64,' + uni.getFileSystemManager()
                .readFileSync(this.avatarBase64, "base64")
            }
            // #endif
            this.model.avatarBase64 = this.avatarBase64;
            this.$u.api.user.saveUserInfo(this.model).then(res => {
              if (res.code == '200') {
                this.vuex_user.avatar = res.imgUrl;
                this.$u.vuex('vuex_user', this.vuex_user);
                uni.showModal({
                  title: '提示',
                  content: res.msg,
                  showCancel: false,
                  success: function() {
                    uni.navigateBack();
                  }
                });
              } else {
                this.$u.toast(res.msg);
              }
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateBack();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    height: 100vh;
    padding: 32rpx;
    background: #f7f7f7;
  }
  
  .u-cell-box {
    border-radius: 16rpx;
    background: #fff;
    overflow: hidden;
  
    /deep/ .u-cell {
      background: transparent;
    }
  }

  .u-form {
    background: #fff;
    padding: 0 15px;
  }

  .u-size-medium {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20px;
    font-size: 28rpx;
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    border: 1px solid #5186e7;
  }

  .u-hairline-border:after {
    border: 1px solid #5186e7 !important;
  }

  .input-placeholder {
    text-align: right;
  }

  .u-input {
    text-align: right !important;
  }

  .u-form-item {
    font-size: 36rpx;
  }
</style>